<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <t-timeline mode="same">
    <t-timeline-item v-for="x in list" :key="x.taskId" :label="x.endTime">
      <div>
        {{ x.taskName }}
        <t-tag v-if="!x.endTime" theme="primary">待提交</t-tag>
        <t-tag v-else-if="x.result === 20" theme="danger">撤销</t-tag>
        <t-tag v-else-if="x.result === 0" theme="success">同意</t-tag>
        <t-tag v-else theme="warning">驳回</t-tag>
      </div>
      <div class="user-box">
        <span class="user-name">
          <t-tag v-for="u in x.approvers" :key="u.approver">{{ u.approverName || u.approver }}</t-tag>
        </span>
        <span class="user-comments">
          <template v-if="x.comments">：{{ x.comments }}</template>
        </span>
      </div>
    </t-timeline-item>
  </t-timeline>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue';
import api from './api';

const props = defineProps<{
  data?: any[];
  procInstId?: string;
  flowCode?: string;
  bizId?: string;
}>();

const list = ref([]);
function update(params: { procInstId?: string; flowCode?: string; bizId?: string }) {
  api.auditLog(params).then((res) => {
    list.value = res;
  });
}

watch(
  () => props.data,
  (v) => {
    if (v) {
      list.value = v;
    }
  },
  { immediate: true },
);

watch(
  () => props.procInstId,
  (v) => {
    if (v) {
      update({ procInstId: v });
    }
  },
  { immediate: true },
);

watch(
  () => [props.flowCode, props.bizId],
  (vs) => {
    if (vs[0] && vs[1]) {
      update({ flowCode: vs[0], bizId: vs[1] });
    }
  },
  { immediate: true },
);

defineExpose({
  update,
});
</script>
<script lang="ts">
export default {
  name: 'AuditLog',
};
</script>
<style lang="less" scoped>
.user-box {
  padding: var(--app-space);
}
.user-name {
  color: var(--app-color-primary);
  font-weight: 600;
  .t-tag + .t-tag {
    margin-left: var(--app-space-horizontal);
  }
}
.user-comments {
  color: var(--app-color-text-primary);
}
</style>
